<template>
    <article>
        <slider :items="items" cname="slider"></slider>
        <section class="list">
            <div class="item" v-for="item in enters" :key="item.title">
                <router-link :to="{name: item.href}">
                    <img :src="item.img" :alt="item.title">
                    <h4>{{item.title}}</h4>
                </router-link>
            </div>
        </section>
    </article>
</template>
<script>
import Slider from '@/components/Slider'
export default {
    name: 'jsHslider',
    components: {
        Slider
    },
    data() {
        return {
            items: [
                {
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/09/19/2e230b84-0259-44e3-a8af-1787b530d340.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/09/19/43b6f523-9010-4f21-9a20-981e8fd2f7a8.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/10/25/e089566a-f02a-4519-9d9e-d70eb38cbcf7.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/11/02/fd67a7ef-4945-45eb-a45e-2c9ee9180d05.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/09/29/c4ab2ad9-bdc9-4cd9-8326-eb97d38e589a.jpg"
                },{
                    "href": "home",
                    "src": "https://fms.res.meizu.com/dms/2018/10/15/55b37ca3-408b-4618-b14a-861d37a21437.jpg"
                }],
            enters: [{
                href: "home",
                img: "https://img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132",
                title: "优惠券"
            },{
                href: "home",
                img: "https://img12.360buyimg.com/jrpmobile/jfs/t5590/252/875247023/17343/946aa72c/59224650N0f7ffc92.png?width=132&height=132",
                title: "领福利"
            },{
                href: "home",
                img: "https://img12.360buyimg.com/jrpmobile/jfs/t4393/329/2180608902/13217/c88c0cec/58ec9dcdN1534e2d7.png?width=132&height=132",
                title: "抢钢镚"
            },{
                href: "home",
                img: "https://img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132",
                title: "白条提额"
            },{
                href: "home",
                img: "https://img12.360buyimg.com/jrpmobile/jfs/t5488/298/1036263348/12073/b4f4de97/590ac8e8Ne9def22e.png?width=135&height=135",
                title: "工资理财"
            }]
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '~assets/scss/element.scss';
    .slider{
        margin-top: 1.2rem;
        /deep/ img{
            width: 100%;
        }
    }
    .list{
        @include list(row);
        background-color: #fff;
        padding-top: .4rem;
        padding-bottom: .2rem;
        justify-content: space-around;
        .item{
            text-align: center;
            img{
                display: inline-block;
                width: .9rem;
                height: .9rem;
            }
            h4{
                font-size: .26rem;
                margin-top: .12rem;
            }
        }
    }
</style>


